<template>
  <div
    class="rootVideo"
    style="
      height: calc(100vh - 50px - 56px);
      display: flex;
      flex-direction: column;
    "
  >
    <div>
      <div class="subject_box" style="position: relative">
        <div
          style="
            color: #f00;
            display: flex;
            align-items: center;
            padding: 0 0.5rem;
            margin-bottom: 0.75vh;
            font-size: 1rem;
          "
        >
          点击下方知识点可切换学习所有课程 ↓
        </div>
        <van-dropdown-menu active-color="#327BFF" class="arrs">
          <van-dropdown-item
            v-model="value"
            :options="option"
            @change="optionList"
          />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="video_content" v-loading="loading">
      <van-empty
        :description="
          pack == '全部'
            ? '抱歉您暂时没有课程哦~'
            : pack == '视频'
            ? '抱歉您暂时没有课程哦~'
            : '抱歉您暂时没有课程哦~'
        "
        v-if="dataList.length == 0"
      />
      <li v-for="item in dataList" :key="item.id" @click="studyClick(item)">
        <div class="font-box">
          <i v-if="pack == '课件'">
            <svg
              t="1637034618568"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1974"
              width="20"
              height="20"
            >
              <path
                d="M722.595694 864.072751c38.737217 0 70.461724-31.72553 70.461724-70.466841l0-563.376571c0-38.741311-31.723484-70.462748-70.461724-70.462748L511.317967 159.76659l0 246.459982-88.002199-52.82199-87.998105 52.82199 0-246.459982-35.281516 0c-38.688099 0-70.360417 31.721437-70.360417 70.462748l0 563.376571c0 38.741311 31.672318 70.466841 70.360417 70.466841L722.595694 864.072751z"
                p-id="1975"
                fill="#1571F7"
              ></path>
            </svg>
          </i>
          <div
            :class="Boolean(item.done) ? 'content_text_boxA' : ''"
            style="width: 6.25rem; margin-right: 12px"
            v-else
          >
            <img :src="item.cover_path" alt="" />
            <div class="card"></div>
            <div class="cardText">已看完</div>
          </div>
          <div style="flex: 1">
            <p>
              {{ item.title }}
            </p>
            <span v-if="item.file_type == '课件'">{{ item.create_time }}</span>
            <p v-if="item.file_type == '视频'" style="width: 100%">
              <el-progress
                :percentage="
                  Boolean(item.status && item.status != 0)
                    ? 100
                    : Boolean(item.done)
                    ? 100
                    : Number((item.mprogress * 100).toFixed(0))
                "
              ></el-progress>
            </p>
          </div>
        </div>
        <div class="img_box">
          <div class="img_text" v-if="pack == '课件'">开始学习</div>
          <!-- <img v-else :src="item.cover_path" alt=""> -->
        </div>
      </li>
    </div>
  </div>
</template>

<script>
import { materialkmlist, materialList } from "@/api/admin.js";
import { getsubject_id, getapplyid } from "@/utils/auth.js";
import { learnImglist } from "@/utils/learnImg.js";
export default {
  props: ["pack"],
  data() {
    return {
      option: [],
      value: 0,
      dataList: [],
      loading: false,
      id: this.$route.query.id&&this.$route.query.id!='undefined'?this.$route.query.id:'',
      kj: this.$route.query.kj&&this.$route.query.kj!='undefined'?this.$route.query.kj:'',
      govideoIsyes: false,
    };
  },
  watch: {
    pack(val) {
      if (this.value) {
        this.fileList();
      }
    },
  },
  methods: {
    fileList() {
      this.dataList = [];
      this.loading = true;
      materialList({
        msid: this.value,
        file_type: this.pack == "全部" ? "" : this.pack,
        page: 1,
        limit: 100,
        applyid: getapplyid(),
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          if (Object.keys(res.data).indexOf("scoreGqLimit") != -1) {
            this.govideoIsyes = res.data.scoreGqLimit;
          } else {
            this.govideoIsyes = false;
          }
          res.data.list.map((item) => {
            let list = JSON.parse(item.material_subject_full);
            if (!item.cover_path) {
              for (let i = 0; i < learnImglist.length; i++) {
                for (let k = 0; k < list.length; k++) {
                  let el = list[k];
                  if (
                    el &&
                    el.indexOf(learnImglist[i].id) != -1 &&
                    (el.indexOf(learnImglist[i].id) - el.indexOf(this.value) <
                      2 ||
                      el.indexOf(learnImglist[i].id) - el.indexOf(this.value) >
                        2)
                  ) {
                    item.cover_path = learnImglist[i].src;
                    break;
                  }
                }
              }
            }
          });
          this.dataList = res.data.list;
        }
      });
    },
    listData() {
      this.option = [];
      materialkmlist({
        msid: getsubject_id(),
        applyid: getapplyid(),
        cate: "理论",
      }).then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            if (item.status == "已学完") {
              this.option.push(
                Object.assign(item, {
                  text:
                    item.title +
                    `${item.kind && item.kind == "选学" ? "(选学)" : ""} —` +
                    item.score +
                    "学时 (已学完)（点击查看更多）",
                  value: item.id,
                })
              );
            } else {
              this.option.push(
                Object.assign(item, {
                  text:
                    item.title +
                    `${item.kind && item.kind == "选学" ? "(选学)" : ""} —` +
                    item.score +
                    "学时（点击查看更多）",
                  value: item.id,
                })
              );
            }
          });
          if (res.data[0]) {
            this.value = this.$route.query.id&&this.$route.query.id!='undefined'
              ? this.$route.query.id
              : res.data[0].id;
            this.fileList();
          }
        }
      });
    },
    optionList(value) {
      // this.option.map(item=>{
      //     if(item.value==value){

      //     }
      // })
      this.fileList();
    },
    studyClick(item) {
      if (this.govideoIsyes) {
        return this.$toast.fail("今天已学学时已达标，请明天继续学习");
      }
      if (item.file_type == "视频") {
        this.$router.push(
          "/video?id=" +
            item.id +
            "&subjctid=" +
            this.value +
            "&kj=" +
            this.pack +
            "&MediaId=" +
            item.MediaId
        );
      }
      if (item.file_type == "课件") {
        this.$router.push(
          "/PDF?id=" +
            item.id +
            "&subjctid=" +
            this.value +
            "&pdf=" +
            item.file_path +
            "&kj=" +
            this.pack
        );
      }
    },
  },
  created() {
    this.listData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .arrs {
    width: 95vw;
    .van-dropdown-menu__item {
      width: 100%;
    }
    .van-ellipsis {
      white-space: normal !important;
      width: 100%;
      word-wrap: break-word !important;
    }
  }
  .van-cell__value {
    flex: 1;
  }
  .van-cell__title {
    flex: 20;
  }

  .video_content {
    margin-top: 0.625rem;
    padding: 0 0.75rem;
    // height: calc(100vh - 197px);
    flex: 1;
    overflow: auto;
    li {
      background: #fff;
      padding: 0.75rem;
      border-top: 1px solid #eee;
      list-style: none;
      display: flex;
      justify-content: space-between;
      height: 5.8rem;
      margin-bottom: 0.75rem;
      .font-box {
        display: flex;
        width: 100%;
        i {
          line-height: 35px;
        }
        & > div {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          img {
            width: 100%;
          }
        }
        p {
          font-size: 0.98rem;
          margin: 0;
          font-weight: 600;
          display: flex;
          align-items: center;
          max-width: 15rem;
          overflow: hidden;
          text-overflow: -o-ellipsis-lastline;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //超出两行省略
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        span {
          font-size: 0.75rem;
          color: #999;
        }
      }
      .img_box {
        height: 100%;
        display: flex;
        align-items: center;
        img {
          height: 100%;
        }
        .img_text {
          width: 4.375rem;
          height: 1.56rem;
          background: #327bff;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 0.875rem;
          border-top-left-radius: 0.75rem;
          border-bottom-right-radius: 0.75rem;
        }
      }
      &:first-child {
        border: none;
      }
    }
  }
  .van-dropdown-menu__item {
    background: #fa6400;
    border-radius: 24px;
    // width: 110%;
    .van-dropdown-menu__title {
      padding: 0.75vh 6.2vw;
      width: 100%;
      color: #eee;
    }
    .van-dropdown-menu__title::after {
      right: 15px !important;
      border-color: transparent transparent #fff #fff;
    }
  }
}
.card {
  display: none;
  width: 6.25rem;
  height: 1rem;
  background: #f00;
  position: absolute;
  transform: rotate(40deg);
  top: 10px;
  right: -35px;
}
.cardText {
  display: none;
  position: absolute;
  // padding:10px;
  font-size: 0.75rem;
  transform: rotate(40deg);
  top: 7px;
  right: -1px;
  color: #fff;
  z-index: 2;
}
.content_text_boxA {
  position: relative;
  overflow: hidden;
  width: 6.25rem;
  margin-right: 1rem;
  .card {
    display: block;
  }
  .cardText {
    display: block;
  }
}
</style>
